<template>
  <div>
    <van-nav-bar title="个人信息" left-arrow @click-left="$router.back()" />
     <van-cell   title="头像" is-link center @click="deletable=true">
        <template #default>
           <!-- <van-image :src="'http://172.17.4.241:8887/upload'+userInfo.userIcon" round
          width="4rem"
          height="4rem"/> -->
          <van-uploader v-model="fileList"  :max-count="1" :deletable="deletable" :after-read="afterRead"/>
        </template>
     </van-cell>
     <van-cell  title="昵称" :value="userInfo.userName" is-link @click="showName=true"/>
     <van-cell  title="手机号" :value="userInfo.userPhone"  is-link @click="telShow=true" />
     <van-cell  title="性别" :value="userInfo.userGender===2? '男':'女'" is-link @click="show = true"/>
      <div style="margin: 30px;">
        <van-button round block type="info" @click="editInfo">更新信息</van-button>
      </div>
      <van-popup v-model="show" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="show = false"
          @confirm="onConfirm"
        />
      </van-popup>
      <van-dialog v-model="showName" title="请输入昵称" show-cancel-button @confirm="confimEdit(nickname)" @cancel='cancelEdit'>
        <van-field v-model="nickname" label="昵称" placeholder="请输入昵称" />
      </van-dialog>
      <van-dialog v-model="telShow" title="请输入手机号(暂不支持修改)" show-cancel-button>
        <van-field v-model="userInfo.userPhone" label="手机号" disabled/>
      </van-dialog>
  </div>
</template>

<script>
export default {
  name:'userInfo',
  data () {
    return {
      show:false,
      telShow:false,
      showName:false,
      deletable:false,
      columns: [ '女' , '男'],
      userId:'',
      userInfo:{},
      fileList:[],
      avactor:'',
      nickname:''
    }
  },
  created(){
    this.userId=JSON.parse(sessionStorage.getItem('user')).userId
    this.getUserInfo()
  },
  methods:{
    getUserInfo(){
           this.$axios.post('/api/market/login/userEdit?userId='+this.userId).then(res=>{
            // console.log(res.data.data)
            if(res.data.code==200){
              this.userInfo=res.data.data[0]
              console.log(this.userInfo)
              this.nickname=this.userInfo.userName
              this.fileList=[]
              this.fileList.push({
                url:'/tu'+this.userInfo.userIcon
              })
              sessionStorage.setItem('user',JSON.stringify(this.userInfo))
            }
        })
        
      },
     onConfirm(value) {
       var gender=0
       if(value=='女'){
         gender=1
       }else{
         gender=2
       }
      this.userInfo.userGender = gender;
      this.show = false;
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      this.avactor=file.file.name
      console.log(this.avactor)
    },
    confimEdit(v){
      this.userInfo.userName=v
    },
    cancelEdit(){
      this.nickname=this.userInfo.userName
    },
    editInfo(){
      // console.log(this.userInfo.userGender)
      // console.log(this.userInfo.userName)
      // console.log(this.avactor)
      var params = {
        userId:this.userInfo.userId,
        userName:this.userInfo.userName,
        userPhone:this.userInfo.userPhone,
        userGender:this.userInfo.userGender
      }
      var fd = new FormData()
      fd.append('userIcon',this.avactor)
      // console.log(fd)
      this.$axios({
        method:'post',
        url:'/api//market/login/editConfirm',
        params:params,
        data:fd,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res=>{
        console.log(res)
        if(res.data.code==200){
          this.$toast.success(res.data.msg)
          this.getUserInfo()
          
        }else{
          this.$toast.fail(res.data.msg)
        }
      })
    }

  }
}
</script>

<style  scoped>
.van-cell__title{
 text-align: left;
 padding-left: 20px;
}
</style>
